<template>
	<div :style="{ height: boxHeight }">
		<nav-bar title="商品展示"></nav-bar>

		<mt-loadmore :auto-fill="false" :bottom-method="loadBottm" ref="loadmore" :bottom-all-loaded="isAllLoaded">
			<ul>
				<li v-for="(goods,index) in goodsList" :key="goods.index">
					<router-link :to="{name:'goods.detail',params:{id:goods.id}}">
						<img :src="goods.img">
						<div class="title">好东西啊</div>
						<div class="desc">
							<div class="sell">
								<span>￥80</span>
								<s>￥9000</s>
							</div>
							<div class="detail">
								<div class="hot">
									热卖中
								</div>
								<div class="count">
									剩99件
								</div>
							</div>
						</div>
					</router-link>
				</li>
			</ul>
		</mt-loadmore>
	</div>
</template>
<script>
// 网络图片 img src随便玩
// 本地静态资源图片  需告知webpack 帮助移动到未来的dist目录
// import ImgSrc from '../xxx.jpg'
// <img :src="ImgSrc" />
	export default {
		props:['apprefs'], // 接收父组件
		data() {
			return {
				goodsList:[], // 商品列表
				page:1, // 页码
				isAllLoaded:false, // 全部数据是否加载(当数据库数据已无可加载数据时设置为true)
				boxHeight: 0, // 父元素盒子高度
			}
		},
		created() {
			let page = this.$route.query.id || '1';
			this.loadByPage(page);
		},
		mounted() {
		    // 装载数据完毕，就收apprefs.appHeader
		    // 公式：设备高度 - 头 - 尾 = 中间的高度 (loadmore父元素的高度)

		    // getBoxHeight为Utils公共方法
		    this.boxHeight = this.getBoxHeight(this.apprefs);
		},
		methods: {
			// 第一次进入页面加载数据
			loadByPage(page) {
				this.$axios.get('https://api.apiopen.top/getImages'/* ?page=' + page*/)
				.then(res => {
					this.goodsList = res.data.result;
					this.page ++;
				})
				.catch(err => console.log('商品列表获取失败',err));
			},
			// 下拉或输入页码后追加数据
			concatByPage(page) {
				this.$axios.get('https://api.apiopen.top/getImages'/* ?page=' + page*/)
				.then(res => {
					// 判断是否还有数据
					if(res.data.result.length === 0) {
						this.$toast('没有更多数据了');
						// loadmore的禁止loadBottom函数调用的属性
						this.isAllLoaded = true;
					}
					this.goodsList = this.goodsList.concat(res.data.result);
					// 通知元素重新定位
					this.$refs.loadmore.onBottomLoaded();
					this.page ++;
				})
				.catch(err => console.log('商品列表获取失败',err));
			},
			loadBottm() {
				this.concatByPage(this.page);
			}
		}
	}
</script>
<style scoped>
	ul {
		margin: 5px 8px;
		overflow: hidden;
		padding-inline-start: 0px;
	}
	li {
		width: 50%;
		float: left;
		padding: 6px;
		box-sizing: border-box;
	}
	li > a:not(.mui-btn) {
		margin: 0;
		padding: 0;
		border: 1px solid #5c5c5c;
		box-shadow: 0 0 4px #666;
		width: 100%;
		display: block;
	}
	li > a:not(.mui-btn) img {
		width: 100%;
	}
	.sell > span {
		float: left;
		color: red;
		text-align: left;
	}
	.sell > s {
		color: gray;
	}
	.detail > .hot {
		float: left;
		text-align: left;
		font-size: 15px;
	}
	.detail > .count {
		float: right;
		text-align: right;
		font-size: 15px;
	}
	/*撑开，去除浮动没有高度*/
	.detail {
		color: white;
		overflow: hidden;
	}
	.desc {
		color: rgba(92,92,92,0.8);
		background-color: rgba(0,0,0,0.8);
	}
	img {
		height: 200px;
	}
</style>